<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-31 17:46:49
 * @LastEditTime: 2020-02-20 16:32:28
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../../css/base.css" />
    <script type="text/javascript" src="../../script/jquery.js"></script>
    <script type="text/javascript" src="../../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../../script/vue.min.js"></script>
    <script type="text/javascript" src="../../script/vant.min.js"></script>
    <script type="text/javascript" src="../../script/fastclick.js"></script>
    <script type="text/javascript" src="../../script/base.js"></script>
    <style type="text/css">
        th img {
            margin-left: 2px;
            width: 15px;
            vertical-align: middle;
        }

        .sort-tran {
            transform: rotate(180deg);
        }

        .ov {
            width: 130px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .ov1 {
            /* width: 50px; */
            /* overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap; */
        }
        .c{
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 20px;
            border: 1px solid #cd1b21;
            font-size: 12px;
            color: #cd1b21;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="init-full">
            <van-nav-bar class="head" :title="'行程统计报表(' + zq + ')'" left-arrow @click-left="onClickLeft">
                <div slot="right" class="head-right">
                    <span @click="showSearch = true;">
                        <img src="../../image/search.png" />
                    </span>
                </div>
            </van-nav-bar>
            <div class="body-no-bottom">
                <div class="content">
                    <div class="report">
                        <div class="table-full">
                            <table style="width: 100%;">
                                <tr>
                                    <th>序号</th>
                                    <th>往来单位</th>
                                    <th @click="toSortArray(0)">
                                        <span class="c">销</span>
                                        <img :class="sortArray[0] == 1?'':'sort-tran'"
                                            :src="sortArray[0] == 0?'../../image/sort_d.png':'../../image/sort.png'">
                                    </th>
                                    <th @click="toSortArray(1)">
                                            <span class="c">到</span>
                                        <img :class="sortArray[1] == 1?'':'sort-tran'"
                                            :src="sortArray[1] == 0?'../../image/sort_d.png':'../../image/sort.png'">
                                    </th>
                                    <th @click="toSortArray(2)">
                                            <span class="c">月</span>
                                        <img :class="sortArray[2] == 1?'':'sort-tran'"
                                            :src="sortArray[2] == 0?'../../image/sort_d.png':'../../image/sort.png'">
                                    </th>
                                    <th>客户性质</th>
                                    <th>信誉等级</th>
                                    <th>付款人</th>
                                    <th>联系方式</th>
                                    
                                </tr>
                                <tr v-for="(row,index) in dataList">
                                    <th>{{index+1}}</th>
                                    <td class="td_left">
                                        <div class="ov">{{row.BHName}}</div>
                                    </td>
                                    <td class="td_right">{{row.BXSMoney || 0}}</td>
                                    <td class="td_right">{{row.SJ_Num || 0}}</td>
                                    <td class="td_right">{{row.YXSMoney || 0}}</td>
                                    <td class="td_left">
                                        <div class="ov1">{{row.KHXZ}}</div>
                                    </td>
                                    <td class="td_left">
                                        <div class="ov1">{{row.XYDJ}}</div>
                                    </td>
                                    <td class="td_left">
                                        <div class="ov1">{{row.FKRY}}</div>
                                    </td>
                                    <td class="td_left">
                                        <div class="ov">{{row.LXFS}}</div>
                                    </td>
                                    
                                </tr>
                            </table>
                        </div>
                        
                    </div>
                </div>
                <van-loading v-if="showLoading" />
            </div>
        </div>

        <van-popup v-model="showSearch" round position="bottom">
            <div>
                <van-cell title="账期" :value="zq" is-link @click="openScreen(-1,110)">
                </van-cell>
            </div>
            <div class="btn-padding">
                <van-button type="primary" block style="border-radius: 0;" @click="getList">查询</van-button>
            </div>
        </van-popup>
    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {
        //$('.init-full').show();
        var userInfo = FLD.getUserInfo();

        var planList = api.pageParam.planList;
        var branchData = api.pageParam.branchData;

        api.addEventListener({
            name: 'selectRow'
        }, function (ret, err) {
            var selectType = ret.value.selectType;
            var type = ret.value.type;
            var row = ret.value.row;
            if (selectType == 110) {
                vm.zq = row.name;
                vm.zqID = row.id;
            }
        })

        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false,
                dataList: [],
                sortArray: [0, 0, 0],
                zq:'',
                zqID:0,
                showSearch:false
            },
            created: function () {
                var that = this;
                
                that.setDefaultValue()
            },
            methods: {
                setDefaultValue(){
                    var that = this;
                    var obj = {
                        S_Type: 110,
                        S_Cont: '',
                        S_BranchID: FLD.getUserInfo().S_BranchID,
                        S_SXZ: '',
                        S_StockID: 0,
                        S_CargoID: 0,
                        S_BarCode: '',
                        S_PriceN: 0,
                        S_ProductID: 0
                    }
                    FLD.ajax('AP_BasList', obj, function (res) {
                        that.zq = res.ds[0].name;
                        that.zqID = res.ds[0].id;
                        that.getList();
					})
                },
                openScreen(type, index) {
                    var that = this;
                    var obj = {
                        S_Type: index,
                        S_Cont: '',
                        S_BranchID: FLD.getUserInfo().S_BranchID,
                        S_SXZ: '',
                        S_StockID: 0,
                        S_CargoID: 0,
                        S_BarCode: '',
                        S_PriceN: 0,
                        S_ProductID: 0
                    }
                    api.openWin({
                        name: '筛选' + index,
                        url: '../common/baseScreen.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: {
                            filterData: obj,
                            type: type,
                            allowClear: false
                        }
                    })
                },
                getList() {
                    var that = this;
                    that.showSearch = false;
                    var obj = {
                        CX_SDate: planList[0].PSDate,
                        CX_EDate: planList[0].PEDate,
                        CX_UpID: branchData.id,
                        CX_JPID:that.zqID
                    }
                    FLD.ajax('APP_XCTJBBJKN', obj, function (res) {
                        that.dataList = res.ds;

                    });
                },
                toSortArray(index) {
                    var that = this;
                    var str = '';
                    if (index == 0) {
                        str = 'BXSMoney';
                    } else if (index == 1) {
                        str = 'SJ_Num';
                    } else {
                        str = 'YXSMoney';
                    }
                    if (that.sortArray[index] == 0) {
                        that.sortArray[index] = 1;
                    } else {
                        that.sortArray[index] = -that.sortArray[index];
                    }
                    if (that.sortArray[index] == 1) {
                        that.dataList.sort(function (a, b) {
                            return a[str] - b[str]
                        })
                    } else {
                        that.dataList.sort(function (a, b) {
                            return b[str] - a[str]
                        })
                    }
                },
                onClickLeft() {
                    api.closeWin();
                }
            }
        })
    };
</script>

</html>